<template>
  <div class="main">
    <familyInner @changePerson="changePerson" @getFamilyList="getFamilyList"></familyInner>
    <div v-if="filterRecordData.length > 0" class="m-record">
      <div
        v-for="(record, index) in filterRecordData"
        :key="index"
        :class="['m-r-item', 'm-r-item' + index]"
        @click="checkDetail(record)"
      >
        <div class="m-title">
          <!-- <div class="m-t-img"><img :src="require('@/static/icon/que.png')" alt="咨询记录" srcset="" /></div> -->
          <div class="ml_m">{{ record.medicrecords[0].medicRecordSummaryData.mainSuit }}</div>
        </div>
        <div class="m-info">
          <div class="ml_info">咨询人：{{ record.name }}</div>
        </div>
        <div class="m-detail">
          {{ record.medicrecords[0].medicRecordSummaryData.diseaseDescn.slice(0, 30) + '...'
          }}<span class="m-detail-btn">详情</span>
        </div>
        <div class="m-doctor">
          <div class="m-d-left">
            <span class="m-d-img"><img :src="require('@/static/icon/doctor.png')" alt="医生" srcset="" /></span>
            <span class="ml_m">{{ record.medicrecords[0].medicRecordSummaryData.medicRecordDoctorData.name }}</span>
            <span class="ml_m m-d-line"></span>
            <span class="ml_m">{{ record.medicrecords[0].medicRecordSummaryData.medicRecordDoctorData.dept }}</span>
          </div>
          <div>
            {{ record.medicrecords[0].createTime }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="ajaxDone && filterRecordData.length === 0" class="m-no">
      <div class="m-n-icon zwjl"></div>
    </div>
    <!--
    <div v-if="recordData.length === 0" class="m-no">
      <div class="m-n-icon zwjl">
      </div>
      <div v-if="!hasVideoService" class="m-n-buy">
        <div class="m-n-left">
          <img
            src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/v-d-bg.png"
            alt=""
            srcset=""
          />
        </div>
        <div class="m-n-right">
          <div class="m-n-txt">您暂无视频医生服务权益，请先购买</div>
          <div class="f-btn" @click="buyService">购买</div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import { getWxaRecords, getFamilyWxaRecords } from '@/api/service';
import { tongji } from '@/utils/tools';
import familyInner from '@/components/familyInner';
export default {
  components: {
    familyInner
  },
  data() {
    return {
      patientId: '',
      recordData: [],
      hasVideoService: false,
      filterRecordData: [],
      ajaxDone: false
    };
  },
  onLoad(option) {
    // console.log('option:', option);
    this.patientId = this.$store.state.join.patientid;
    if (option && option.hasVideoService === '1') {
      this.hasVideoService = true;
    }
  },
  methods: {
    getFamilyList(familyList) {
      // this.familyList = familyList;
      // familyList[0]是全家
      let patientIdStr = familyList
        .slice(1)
        .map((item) => {
          return item.insuredId;
        })
        .join(',');
      console.log('patientIdStr', patientIdStr);
      this.getFamilyWxaRecordsByIds(patientIdStr);
    },
    buyService() {
      uni.navigateTo({
        url: '/pagesC/service/index'
      });
    },
    getFamilyWxaRecordsByIds(patientIdListStr) {
      // 获取问诊记录
      getFamilyWxaRecords(patientIdListStr).then((res) => {
        // console.log('getWxaRecords res:', res);
        this.ajaxDone = true;
        if (res.code === 0) {
          // 使用的时候取medicrecords第0个元素即可
          this.recordData = res.data || [];
          this.filterRecordData = res.data || [];
        }
      });
    },
    getWxaRecordsById(patientId) {
      // 获取问诊记录
      try {
        getWxaRecords(patientId).then((res) => {
          // console.log('getWxaRecords res:', res);
          this.ajaxDone = true;
          if (res.code === 0) {
            // 使用的时候取medicrecords第0个元素即可
            this.filterRecordData = res.data || [];
          } else {
            this.filterRecordData = [];
          }
        });
      } catch (e) {
        console.log('e:', e);
        this.filterRecordData = [];
      }
    },
    changePerson(index, relation, insuredId) {
      this.ajaxDone = false;
      if (index === 0) {
        this.filterRecordData = this.recordData;
      } else {
        this.getWxaRecordsById(insuredId);
      }
    },
    checkDetail(record) {
      // 查看问诊记录详情
      uni.navigateTo({
        url: '/pages/service/askDoctorHistoryDetail'
      });
      console.log('record:', record);
      this.$store.commit('service/setWxaRecordsDetail', record);
      tongji('244ff877-db0f-43ff-b10c-8e5d012875ee');
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  .ml_m {
    // margin-left: 16rpx;
  }
  .ml_info {
    color: rgba(0, 0, 0, 0.7);
    font-weight: 500;
    margin-top: 20rpx;
  }
  .m-record {
    box-sizing: border-box;
    .m-r-item {
      width: 700rpx;
      margin: auto;
      margin-top: 24rpx;
      padding: 32rpx;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 6rpx 24rpx rgba(0, 0, 0, 0.05);
      opacity: 1;
      border-radius: 24rpx;

      &.m-r-item0 {
        margin-top: 32rpx;
      }
      .m-title {
        font-size: 40rpx;
        color: rgba(0, 0, 0, 0.9);
        font-weight: 500;
        display: flex;
        align-items: flex-start;
        .m-t-img {
          width: 40rpx;
          height: 40rpx;
          font-size: 0;
          flex-shrink: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .ml_m {
          margin-top: -12rpx;
        }
      }
      .m-detail {
        margin-top: 20rpx;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.7);
        .m-detail-btn {
          font-size: 32rpx;
          color: #10aeff;
        }
      }
      .m-doctor {
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40rpx;
        color: #999;
        .m-d-left {
          display: flex;
          align-items: center;
          .m-d-img {
            width: 28rpx;
            height: 28rpx;
            display: inline-block;
            font-size: 0px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .m-d-line {
            height: 28rpx;
            width: 0;
            border-right: 1px solid #d2d2d2;
            display: inline-block;
          }
        }
      }
    }
  }
  .m-no {
    font-size: 36rpx;
    margin-top: 32rpx;
    .m-n-icon {
      // width: 700rpx;
      margin: auto;
      // height: 428rpx;
      display: flex;
      // background: #ffffff;
      // box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.05);
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border-radius: 24rpx;
      .m-n-i-img {
        width: 120rpx;
        height: 120rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .m-n-icon-tip {
        margin-top: 28rpx;
        font-size: 60rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
      }
    }
    .m-n-buy {
      width: 700rpx;
      margin: auto;
      margin-top: 24rpx;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24rpx;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.05);
      border-radius: 24rpx;
      .m-n-left {
        width: 260rpx;
        height: 180rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .m-n-right {
        margin-left: 24rpx;
        .m-n-txt {
          margin-top: 24rpx;
          text-align: center;
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.7);
          text-align: left;
        }
        .f-btn {
          margin-top: 40rpx;
          width: 160rpx;
          height: 56rpx;
          line-height: 56rpx;
          background: linear-gradient(186deg, #fe894d 0%, #ef3931 100%);
          border-radius: 28rpx;
          color: #fff;
          font-size: 28rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>
